<template>
  <div>
    <div class="mt15 mb15 pl5 color-333333 font-700">
      {{ $t("orderDetail.开票信息") }}:
    </div>
    <el-table
      :show-header="false"
      :data="tableData"
      style="width: 100%"
      :cell-class-name="cellClassName"
      border
      :span-method="arraySpanMethod"
    >
      <el-table-column prop="label1" />
      <el-table-column prop="value1">
        <template #default="{ row }">
          <el-image
            v-if="row.isImage && row.value1"
            style="width: 100px; height: 100px"
            :src="row.value1"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[row.value1]"
            show-progress
            :initial-index="4"
            fit="cover"
            preview-teleported
          />
          <div v-else>{{ row.value1 ?? '--' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="label2" />
      <el-table-column prop="value2" />
    </el-table>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import moment from "moment";

const { t } = useI18n();

const props = defineProps({
  orderDetail: {
    type: Object,
    default: () => {},
  },
});
const tableData = ref([]);

watch(
  () => props.orderDetail,
  (newVal) => {
    console.log(22222, newVal);
    const {
      vipInvoiceStatus,
      vipInvoiceTime,
      vipInvoiceHeaderType,
      vipInvoiceHeader,
      vipInvoiceTaxpayerNo,
      vipInvoiceContact,
      vipInvoicePhone,
      vipInvoiceAddress,
      vipInvoiceEmail,
      vipInvoiceCheckTime,
      vipInvoiceCheckMessage,
      vipInvoiceCheckImage,
    } = newVal;
    if (vipInvoiceStatus == 1) {
      tableData.value = [
        {
          label1: t("orderDetail.是否需要开票"),
          value1:
            vipInvoiceStatus == 1 ? t("orderDetail.是") : t("orderDetail.否"),
        },
        {
          label1: t("orderDetail.开票时间"),
          value1: vipInvoiceTime
            ? moment(vipInvoiceTime).format("YYYY-MM-DD HH:mm:ss")
            : "--",
          label2: t("orderDetail.抬头类型"),
          value2:
            vipInvoiceHeaderType == 1
              ? t("orderDetail.企业")
              : t("orderDetail.个人"),
        },
        {
          label1:
            vipInvoiceHeaderType == 1
              ? t("orderDetail.抬头名称")
              : t("orderDetail.姓名"),
          value1: vipInvoiceHeader || "--",
          label2:
            vipInvoiceHeaderType == 1
              ? t("orderDetail.纳税人识别号")
              : t("orderDetail.身份证号"),
          value2: vipInvoiceTaxpayerNo || "--",
        },
        {
          label1: t("orderDetail.联系人"),
          value1: vipInvoiceContact || "--",
          label2: t("orderDetail.联系电话"),
          value2: vipInvoicePhone || "--",
        },
        {
          label1: t("orderDetail.地址"),
          value1: vipInvoiceAddress || "--",
          label2: t("orderDetail.邮箱"),
          value2: vipInvoiceEmail || "--",
        },
        {
          label1: t("orderDetail.发票审核时间"),
          value1: vipInvoiceCheckTime
            ? moment(vipInvoiceCheckTime).format("YYYY-MM-DD HH:mm:ss")
            : "--",
          label2: t("orderDetail.审核失败原因"),
          value2: vipInvoiceCheckMessage || "--",
        },
        {
          label1: t("orderDetail.图片"),
          value1: vipInvoiceCheckImage,
          isImage: true,
        },
      ];
    } else {
      tableData.value = [
        {
          label1: t("orderDetail.是否需要开票"),
          value1:
            vipInvoiceStatus == 1 ? t("orderDetail.是") : t("orderDetail.否"),
        },
      ];
    }
    console.log(11111, tableData.value);
  },
  { immediate: true }
);

const cellClassName = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex % 2 === 0) {
    return "warning-column winth-20";
  } else {
    return "winth-30";
  }
};

const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  //   if (
  //     (columnIndex === 2 && rowIndex === 2) ||
  //     (columnIndex === 3 && rowIndex === 2)
  //   ) {
  //     return [0, 0];
  //   } else if (columnIndex === 1 && rowIndex === 2) {
  //     return [1, 3];
  //   } else {
  return [1, 1];
  //   }
};
</script>
